/*
 * @Description: 年报编辑
 * @Author: Zzt
 * @Date: 2022-11-28 20:33:29
 * @LastEditTime: 2022-12-06 18:11:47
 */

import { useEffect, useState } from 'react';
import { Button, Form, Input, Modal } from 'antd';
import { useAccountContext } from '../../contexts/AccountContext';

const list = [
  {
    id: 99,
    name: '纸质档案',
    input: [
      [
        { label: '按卷管理-卷数', id: 1, name: 'juan' },
        { label: '按卷管理-排架长度-米', id: 2, name: 'mi' }
      ],
      [
        { label: '保管期限-永久-卷数', id: 3, name: 'foreverJuan' },
        { label: '保管期限-永久-件数', id: 4, name: 'foreverJian' }
      ]
    ]
  },
  {
    id: 98,
    name: '数字档案资源',
    input: [
      [
        { label: '电子档案（总数）', id: 5, name: 'eFileNum' },
        { label: '电子档案总容量', id: 6, name: 'eFileBoth' }
      ],
      [
        { label: '电子档案-数码照片件数（件）', id: 7, name: 'ePhotoJian' },
        { label: '电子档案-数码照片总容量（GB）', id: 8, name: 'ePhotoZong' }
      ]
    ]
  }
];
const ReportEdit = (props: any) => {
  const { editReportList } = useAccountContext();
  const { visible, onClose, data } = props;
  const [reportList, setReportList] = useState(list);
  const [form] = Form.useForm();
  useEffect(() => {}, [visible]);
  // 新增档案类型
  const onFinish = (values: any) => {
    console.log(values);

    // editReportList({ ...data, dataJson: values }).then(() => {
    //   onCancel();
    // });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  // 提交表单
  const submitFunc = () => {
    form.submit();
  };
  const onCancel = () => {
    onClose();
  };
  return (
    <>
      <Modal
        forceRender
        destroyOnClose
        title={'llllll'}
        visible={visible}
        width={800}
        onCancel={onCancel}
        footer={[
          <Button key="back" onClick={onCancel}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={submitFunc}>
            保存
          </Button>
        ]}
      >
        <Form
          form={form}
          colon={false}
          labelCol={{ span: 16 }}
          wrapperCol={{ span: 8 }}
          labelAlign={'left'}
          onFinish={onFinish}
        >
          {reportList.map((items: any) => (
            <div key={items.id}>
              <div style={{ margin: '10px', fontWeight: 'bold', fontSize: 'large' }}>
                {items.name}
              </div>
              <div
                // className={cx('outK')}
                style={{ border: 'solid 1px black', borderRadius: '6px', padding: '10px' }}
              >
                {items.input.map((item: any) => (
                  <div key={item.id}>
                    {item.map((item: any) => (
                      <Form.Item label={item.label} name={item.name}>
                        <Input></Input>
                      </Form.Item>
                    ))}
                    <hr style={{ border: 'none', borderTop: '1px dashed' }} />
                  </div>
                ))}
              </div>
            </div>
          ))}
        </Form>
      </Modal>
    </>
  );
};
export default ReportEdit;
